<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/my.css" rel="stylesheet" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}

			.mui-table-view-cell>.mui-slider-handle {
				position: relative;
				background-color: floralwhite;
			}
			.mui-card {
			    border-radius: 4px;
			    box-shadow: 0 3px 4px rgba(0,0,0,.3);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bc2">
			<h1 class="mui-title">我的收藏</h1>
		</header>
		<div class="mui-content mui-scroll-wrapper bc">
			<div class="mui-scroll">
				<div class="mui-row" id="collectionList">
					<div align="center" style="margin: 5%;"></div>
				</div>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/config.js"></script>
	<script src="js/date.js"></script>
	<script src="js/book.js"></script>
	<script>
		var self;
		var deviceNum;
		mui.init({
			gestureConfig: {
				longtap: true, //默认为false
			},
			pullRefresh : {
			    container:"#collectionList",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			      height:'50px',//可选,默认50px.下拉刷新控件的高度,
			      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			      auto: false,//可选,默认false.首次加载自动上拉刷新一次
			      callback :init //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
		});
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0006, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			indicators: false, //是否显示滚动条
			bounce: true //是否启用回弹
		});
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			deviceNum = plus.storage.getItem("deviceNum");
			if (deviceNum == null || deviceNum == "") {
				mui.toast('获取设备号失败，请确认是否开启权限', {
					duration: 'short',
					type: 'div'
				})
				return;
			}
			init();
		});

		function init(){
			mui.ajax(config.config.path + "/collection/" + deviceNum, {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						var ele = document.getElementById("collectionList");
						var html = "";
						for (j = 0, len = result.data.length; j < len; j++) {
							var str = result.data[j].bookName;
							if (str.length >= 7) str = str.substr(0, 6) + '...';
							var img = result.data[j].bookImg;
							if(img == null || img == ''){
								img = "images/default.png";
							}
							var chapterId = "";
							var bookNum = "";
							var chapterNum = "";
							var chapterTitle = "";
							if(result.data[j].bookTag != null){
								chapterId = result.data[j].bookTag.chapterId;
								bookNum = result.data[j].bookTag.bookNumber;
								chapterNum = result.data[j].bookTag.chapterNum;
								chapterTitle = result.data[j].bookTag.chapterTitle;
							}
							html = html + '<div class="mui-col-sm-4 mui-col-xs-4"><div cId="' 
								+ chapterId 
								+ '" name="' + result.data[j].bookName
								+ '" bookId="' + result.data[j].bookId 
								+ '" bookNum="' + bookNum
								+ '" chapterNum="' + chapterNum
								+ '" chapterTitle="' + chapterTitle
								+ '" class="mui-card bc2">'+
								'<div class="mui-card-header mui-card-media" style="height:36vw;background-image:url('+img+'),url(images/default.png)"></div>'+
								'<div class="mui-card-content" style="margin-left:5px;">'+str+'</div></div></div>';
						}
						if(ele.innerHTML != html) {
							ele.innerHTML = html;
						}
					}
					mui('#collectionList').pullRefresh().endPulldown();
				}
			});
		}

		mui("#collectionList").on('tap', '.mui-card', function() {
			//获取id
			var cId = this.getAttribute("cId");
			var name = this.getAttribute("name");
			var bookId = this.getAttribute("bookId");
			var bookNum = this.getAttribute("bookNum");
			var chapterNum = this.getAttribute("chapterNum");
			var chapterTitle = this.getAttribute("chapterTitle");
			//传值给详情页面，通知加载新数据
			if(cId == ""){
				book(bookId);
			}else{
				chapter(cId, name, bookId, bookNum, chapterNum, chapterTitle);	
			}
		});

		mui("#collectionList").on('longtap', '.mui-card', function() {
			//获取id
			var bookId = this.getAttribute("bookId");
			var elem = this;
			//传值给详情页面，通知加载新数据
			mui.confirm('确认取消收藏？', '提示', ['确认', '不了'], function(e) {
				if (e.index == 0) {
					mui.ajax(config.config.path + "/collection/", {
						data: {
							"bookId": bookId,
							"deviceNum": deviceNum
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'DELETE', //HTTP请求类型
						contentType: 'application/json;charset=utf-8',
						success: function(data) {
							init();
						},
						error: function(xhr, type, errorThrown) {}
					});
				} 
			}, 'div');
		});
	</script>
</html>
